{extend name="/public/base" /}
{block name='pz'}layui-nav-itemed{/block}
{block name='cpgl'}layui-this{/block}
{block name="main"}
<div style="padding:20px;">
	<div class="demoTable layui-form-pane">
		<!-- 订单号：
		<div class="layui-inline">
			<input class="layui-input" name="value" id="demoReload" autocomplete="off" value="" />
		</div> -->
		<div class="layui-inline">
			<label class="layui-form-label">产品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="value" id="demoReload" placeholder="请输入产品名称" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<button class="layui-btn" data-type="reload" id="btnsearch">搜索</button>
		<button class="layui-btn" id="add">添加数据</button>
	</div>
	<table id="tablea" lay-filter="tablea" style="margin-top:20px;"></table>
</div>
{/block}
{block name="js"}
<script type="text/html" id="barDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
	</div>
</script>
<script type="text/javascript">
	//添加数据
	$("#add").click(function() {
		layer.open({
			type: 2, // page 层类型
			area: ['750px', '600px'],
			title: '添加数据',
			shade: 0.6, // 遮罩透明度
			shadeClose: true, // 点击遮罩区域，关闭弹层
			maxmin: false, // 允许全屏最小化
			anim: 1, // 0-6 的动画形式，-1 不开启
			content: "{:url('Disposition/productadd')}"
		});
	});
	layui.use(function() {
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;
		// 创建表格实例
		//数据展示
		table.render({
			elem: '#tablea',
			toolbar: '#demo-toolbar-setRowChecked',
			url: '{:url("Disposition/productData")}',
			cols: [
				[{
						field: 'create_time',
						title: '创建时间',
						width: 103,
						fixed: 'left'
					},
					{
						field: 'brand',
						title:'品牌名称',
						width: 110
					},
					{
						field: 'product_name',
						title: '产品名称'
					},
					{
						field: 'net_content',
						title: '净含量',
						width: 80
					},
					{
						field: 'unit',
						title: '单位',
						width:50
					},
					{
						field: 'status',
						title: '产品状态',
						width: 100,
						templet: function(d) {
							if (d.status == 1) {
								return '<span class="layui-badge-rim" style="color:green;font-weight: bold;">启用</span>'
							} else {
								return '<span class="layui-badge-rim" style="color:red;font-weight: bold;">禁用</span>'
							}
						}
					},
					{
						title: '操作',
						width: 106,
						fixed: 'right',
						toolbar: '#barDemo'
					}
				]
			],
			height: 440,
			page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
				//curr: 5, //设定初始在第 5 页
				limit: 10,
				limits: [10, 50, 100],
				groups: 3, //只显示 1 个连续页码
				first: false, //不显示首页
				last: false //不显示尾页
			},
			id: 'test'
		});
		//搜索数据
		$('#btnsearch').click(function() {
			table.reload('test', {
				where: {
					value: $('#demoReload').val(),
				},
				page: {
					curr: 1
				}
			});
		});
		//修改操作
		  table.on('tool(tablea)', function(obj){ //注：tool是工具条事件名，test是table定义的lay-filter="*"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也就是对应的操作）
		    if(layEvent === 'edit'){
		      layer.open({
		        type: 2, // page 层类型
		        area: ['750px', '600px'],
		        title: '更新数据',
		        shade: 0.6, // 遮罩透明度
		        shadeClose: true, // 点击遮罩区域，关闭弹层
		        maxmin: false, // 允许全屏最小化
		        anim: 1, // 0-6 的动画形式，-1 不开启
		        content: '{:url("Disposition/productedit")}?id='+ data.id //iframe的url，并且可以带有参数
		      });
		    }else if(layEvent === 'del'){
				layer.confirm('是否删除当前记录？',function(){
					$.ajax({
						type: 'get',
						url: '{:url("Disposition/productdel")}', // 假设表单有action属性
						data: 'id='+data.id, // 自动序列化表单元素为字符串
						dataType:'json',
						success: function(res) {
							if(res.code==200){
								layer.msg(res.msg,{time:500},function(){
									window.location.reload();
								});
							}else{
								layer.msg(res.msg);
							}
						}
					});
				});
			}
		  });
	});
</script>
{/block}